<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>All experiments</title>
	<link rel="stylesheet" href="/static/jquery.ui.all.css">
	<link rel="stylesheet" href="/static/bootstrap.min.css">
	<script src="/static/jquery-1.10.2.js"></script>
	<script src="/static/jquery.ui.core.js"></script>
	<script src="/static/jquery.ui.widget.js"></script>
	<script src="/static/jquery.ui.accordion.js"></script>
	<script src="/static/jquery.jeditable.js"></script>
	<script>
	$(function() {
	$("div.accordian").accordion({
	    heightStyle: "content",
	    autoHeight: false,
	    collapsible: true,
	    active: false,
		});
	
	$(".editable").each(function(){
	    groupattr = $(this).siblings("[name=hiddenID]").val()	
	    $(this).editable("/chgrpname/", { 
	    type   : 'textarea',
	    indicator : 'Saving...',
	    submit : 'OK',
	    submitdata: function(value, setting){
	    return {attrname:groupattr}
	    },
	    cancel : 'cancel',
	});
	}
	);

	// Need to include this for CSRF token to work with Jeditable.js
	$.ajaxSetup({ 
	     beforeSend: function(xhr, settings) {
		 function getCookie(name) {
		     var cookieValue = null;
		     if (document.cookie && document.cookie != '') {
			 var cookies = document.cookie.split(';');
			 for (var i = 0; i < cookies.length; i++) {
			     var cookie = jQuery.trim(cookies[i]);
			     // Does this cookie string begin with the name we want?
			 if (cookie.substring(0, name.length + 1) == (name + '=')) {
			     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
			     break;
			 }
		     }
		 }
		 return cookieValue;
		 }
		 if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
		     // Only send the token to relative URLs i.e. locally.
		     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
		 }
	     } 
	});

	});

	</script>
  </head> 
  <body>
	<div class="container">
		
		<div class="navbar navbar-default" role="navigation">
		<ul class="nav nav-pills">
		<li><a href="/">HTStool Web Home</a></li>
		<li class="active"><a href="#">Experiment</a></li>
		<li><a href="#">Other</a></li>
		</ul>
		</div>
	
        <ul class="list-group">
			<li class="list-group-item list-group-item-info">
			Experiment Information
			</li>
			<li class="list-group-item"><span class="badge">{{ exp.expname }}</span>Experiment name:</li>
			<li class="list-group-item"><span class="badge">{{ exp.group }}</span>Group name:</li>
			<li class="list-group-item"><span class="badge">{{ exp.screen }}</span>Screen name:</li>
			<li class="list-group-item"><span class="badge">{{ exp.screentype }}</span>Screen type:</li>
			<li class="list-group-item"><span class="badge">{{ exp.library }}</span>Screen library:</li>
			<li class="list-group-item"><span class="badge">{{ exp.description }}</span>Protocol:</li>
		</ul>
		
			
		
		
		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">Global QC</h3>
			</div>
			<div class="panel-body">
				<a class="btn btn-info" href="/errbar/?expid={{exp.id}}" role="button"> Plate mean vs NT mean</a>
			</div>
		</div>	
		
		
		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">Analysis Steps</h3>
			</div>
			<div class="panel-body">
			      <a class="btn btn-danger" href="/d/exp/{{exp.id}}" onClick="return confirm('You sure??');" role="button">Delete experiment</a>
			      <a class="btn btn-primary" href="/normalise/?expid={{exp.id}}" role="button">Normalisation</a>
			      <a class="btn btn-primary" href="/summarise/?expid={{exp.id}}" role="button">Summarisation</a>
			</div>
		</div>	
 
		
		
		<div class="accordian">	
    	{% for plategroup in exp.plategroups %}
	<h2><a class=href="#">{{ plategroup.groupname }} {{ plategroup.plate_type }}</a></h2>
	<div>
		<p style="color:green">Click on text to modify </p>
		<div>
		<input name="hiddenID" type="hidden" value="groupname">
		<h3 class="editable" id="{{plategroup.id}}">{{ plategroup.groupname }}</h3>
		</div>


		<div>
		<input name="hiddenID" type="hidden" value="groupdesc">
		<h4 class="editable" id="{{plategroup.id}}">{{ plategroup.groupdesc }}</h4>
		</div>
		
		<a href="/g/{{plategroup.id}}">Go to group  </a>
	</div>
    	{% endfor %}
	</div>
		</div>
		
	
	
	  

	


</body>
</html>
